<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html" id="parent">
    <div class="desc">
        <h1>Dashboard</h1>
        <p>
            The dashboard section displays a quick information about the projects and warehouses status
        </p>
    </div>       
    <div class="row_dashboard" >
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>
                        44
                    </h3>
                    <p>
                        User Registrations
                    </p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
                <a href="#" class="small-box-footer">
                    More info <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="row_dashboard" >
        <div class="small-box bg-green">
            <div class="inner">
                <h3>
                    53<sup style="font-size: 20px">%</sup>
                </h3>
                <p>
                    Bounce Rate
                </p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <div class="row_dashboard" >
        <div class="small-box bg-purple-gradient">
            <div class="inner">
                <h3>
                    53<sup style="font-size: 20px">%</sup>
                </h3>
                <p>
                    Bounce Rate
                </p>
            </div>
            <div class="icon">
                <i class="ion-alert-circled"></i>
            </div>
            <a href="#" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <div class="row_dashboard" >
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>
                        150
                    </h3>
                    <p>
                        New Orders
                    </p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
                <a href="#" class="small-box-footer">
                    More info <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="row_container ui-grid-col-5">
        <p:panel id="warehosue_status" header="Warehouses Status" toggleable="true" toggleTitle="Warehosu Toggled" toggleOrientation="vertical">
            
            <p:chart type="pie" model="#{chartView.pieModel1}" style="width:400px;height:300px">
            <p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
        </p:chart>
        </p:panel>
        </div>
    <div class="row_container ui-grid-col-5">
         <p:panel id="transactions_status" header="Transactions Status" toggleable="true" toggleTitle="Warehosu Toggled" toggleOrientation="vertical">
             <p:chart type="bar" model="#{chartView.barModel}" style="width:400px;height:300px">
            <p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
        </p:chart> 
        </p:panel>
    </div>
</ui:composition>

